<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>登录凭证</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<link href="css/front_index.css" rel="stylesheet">

		<script type="text/javascript" src="vue/vue.min.js"></script>
		<link href="vue/element/index.css" rel="stylesheet">
		<script type="text/javascript" src="vue/element/index.js"></script>

	</head>

	<body>
		<div class="lyear-layout-web" id="vue">
			<div class="lyear-layout-container">


				<!--头部信息-->
				<header class="lyear-layout-header" style="padding-left: 0px;">

					<nav class="navbar navbar-default">
						<div class="topbar">

							<div class="topbar-left">
								<span class="btn btn-primary btn-sm badge">{{list.length}}</span>
								<button class="btn btn-primary btn-sm" type="button" @click="toAddLoginToken">
									<i class="mdi mdi-comment-outline">新增</i>
								</button>


							</div>

							<ul class="topbar-right">
								<li class="dropdown dropdown-profile">
									<a href="javascript:void(0)" data-toggle="dropdown">
										<img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg"
											alt="笔下光年" />
										<span>笔下光年 <span class="caret"></span></span>
									</a>
									<ul class="dropdown-menu dropdown-menu-right">
										<li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a>
										</li>
										<li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i>
												修改密码</a> </li>
										<li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
										<li class="divider"></li>
										<li> <a href="backend_selfLogin.html"><i class="mdi mdi-logout-variant"></i>
												退出登录</a> </li>
									</ul>
								</li>
							</ul>

						</div>
					</nav>

				</header>

				<!-- 模态窗口   用于新增信息-->
				<button id="showModal" v-show="false" class="btn btn-primary m-r-5" type="button" data-toggle="modal"data-target="#exampleModal">打开</button>
				<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
					aria-labelledby="exampleModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="exampleModalLabel">{{operateType}}</h4>
							</div>

							<div class="modal-body">
								<div class="form-group has-feedback feedback-left">
									<select @change="sourceChange" class="form-control" style="color:#black" v-model="source" size="1" placeholder="请选择来源">
								      <option style="color:#ffe7e7;background-color: black;"
								        v-for="item in type"
								        :key="item.value"
								        :label="item.label"
								        :value="item.value">
								      </option>
								    </select>
								</div>
								<div class="form-group has-feedback feedback-left" v-show="source=='网址管理'" @click="sourceChange()">
									 <input type="text" placeholder="请输入应用名称" class="form-control"   v-model="logintokenSource.name" />
								</div>

								<div class="form-group has-feedback feedback-left" v-show="source !='网址管理'">
									<input type="text" placeholder="请输入应用名称" class="form-control"   v-model="logintokenSource.name"/>
								</div>

								<div class="form-group has-feedback feedback-left" v-show="source=='网址管理'">
									 <textarea placeholder="请输入应用描述" class="form-control"  v-model="logintokenSource.description" disabled></textarea>
								</div>
								<div class="form-group has-feedback feedback-left" v-show="source !='网址管理'">
									<textarea placeholder="请输入应用描述" class="form-control"  v-model="logintokenSource.description"></textarea>
								</div>

								<div class="form-group has-feedback feedback-left">
									 <input type="text" placeholder="请输入用户名" class="form-control"   v-model="logintokenContent.username"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									 <input type="text" placeholder="请输入密码" class="form-control"   v-model="logintokenContent.password"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									 <textarea placeholder="请输入凭证描述" class="form-control"  v-model="logintokenContent.description"></textarea>
								</div>
								
							</div>

							<div class="modal-footer">
								<button id="hiddenModal" v-show="false" type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
								<button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
							</div>
						</div>
					</div>
				</div>

				<!-- 模态窗口 用于选择信息-->
				<button id="showModalWebsite" v-show="false" class="btn btn-primary m-r-5" type="button" data-toggle="modal"data-target="#exampleModalWebsite">打开</button>
				<div class="modal fade" id="exampleModalWebsite" tabindex="-1" role="dialog"
					aria-labelledby="exampleModalWebsiteLabel" style=" height: 100vh;overflow-y: auto;margin: 0;padding: 20px;box-sizing: border-box;">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="exampleModalWebsiteLabel">{{operateType}}</h4>
							</div>

							<div class="modal-body">
								<!--模态框中的查询-->
								<div class="col-lg-12" style="position: sticky; top: 0; z-index: 100; background: white; padding: 15px 0; margin-bottom: 20px;">
									<div class="input-group">
										<input type="text" v-model="query.description" class="form-control" placeholder="输入内容" @keydown.enter="clickQuery()">
										<span class="input-group-btn">
											<button class="btn btn-default" type="button" @click="clickClean()">清空</button>
										  <button class="btn btn-default" type="button" @click="clickQuery()">搜索</button>
										</span>
									</div>
								</div>
								
								<div class="container-fluid">
								  
								  <div class="row">
								    
								    <div class="col-sm-6 col-lg-3" v-for="(item,index) in listWebsite"  @click="clickCheck(item)">
								      <div class="card" style="height: 150px;">
								        <div class="card-header" :class=" cartColor[index % cartColor.length]">
								          <h4>{{item.name}}</h4>
								          <ul class="card-actions" >
								            <li>
								              <button type="button">
													<button v-if="item.imginfo == null"  class="btn btn-sm btn-danger" >{{item.name}}</button>
													<img v-else :src="item.imginfo" style="width: 100px;height: 20px;"/>
													<i class="mdi mdi-checkbox-marked-outline"></i>
												</button>
								            </li>
								          </ul>
								        </div>
								        <div class="card-body">
								          <p class="truncate">{{item.description}}</p>
								        </div>
								      </div>
								    </div>

								  </div>
								</div>
								
							</div>

							<div class="modal-footer" v-show="false">
								<button id="hiddenModalWebsite" v-show="false" type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
							</div>


						</div>
					</div>
				</div>


				<!--End 头部信息-->

				<!--页面主要内容-->

				<main class="lyear-layout-content" style="position: relative; padding-top: 70px;padding-left: 0px;">

					<div class="col-lg-12"
						style="position: sticky; top: 0; z-index: 100; background: white; padding: 15px 0; margin-bottom: 20px;">
						<div class="input-group">
							<input type="text" v-model="query.description" class="form-control" placeholder="输入内容" @keydown.enter="clickQuery()">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" @click="clickClean()">清空</button>
								<button class="btn btn-default" type="button" @click="clickQuery()">搜索</button>
							</span>
						</div>
					</div>

					<div class="container-fluid">

						<div class="row">

							<div class="col-sm-6 col-lg-3" v-for="(item,index) in list">
								<div class="card" style="height: 150px;">
									<div class="card-header" :class=" cartColor[index % cartColor.length]">
										<h4 @click="check(item)">{{item.name}}</h4>
										<ul class="card-actions">
											<li>
												<button type="button">
													<a v-if="item.imginfo == null" :href="item.link" target="_blank">
														<button class="btn btn-sm btn-danger">点击访问</button>
													</a>
													<a v-else :href="item.link" target="_blank">
														<img :src="item.imginfo" style="width: 100px;height: 20px;" />
													</a>
													<i @click="delLogintoken(item)" class="mdi mdi-delete"></i>
												</button>
											</li>
										</ul>
									</div>
									<div class="card-body">
										<p class="truncate">{{item.description}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>
				<!--End 页面主要内容-->


				<!-- 模态窗口   用于查看和修改-->
				<button id="showModalLook" v-show="false" class="btn btn-primary m-r-5" type="button" data-toggle="modal"data-target="#exampleModalLook">打开</button>
				<div class="modal fade" id="exampleModalLook" tabindex="-1" role="dialog"
					 aria-labelledby="exampleModalLookLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">

							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="exampleModalLookLabel" @click="toEdit">{{operateType}}</h4>
							</div>

							<div class="modal-body">

								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入应用名称" class="form-control"   v-model="logintokenSource.name" :readonly="operateType=='查看'"/>
								</div>

								<div class="form-group has-feedback feedback-left">
									<textarea placeholder="请输入应用描述" class="form-control"  v-model="logintokenSource.description" :readonly="operateType=='查看'"></textarea>
								</div>

								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入用户名" class="form-control"   v-model="logintokenContent.username" :readonly="operateType=='查看'"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									<input type="text" placeholder="请输入密码" class="form-control"   v-model="logintokenContent.password" :readonly="operateType=='查看'"/>
								</div>
								<div class="form-group has-feedback feedback-left">
									<textarea placeholder="请输入凭证描述" class="form-control"  v-model="logintokenContent.description" :readonly="operateType=='查看'"></textarea>
								</div>

							</div>

							<div class="modal-footer">
								<button id="hiddenModalLook" v-show="false" type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
								<button v-show="operateType=='修改'" type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>

		<!--消息提示-->
		<script src="js/bootstrap-notify.min.js"></script>
		<script type="text/javascript" src="js/lightyear.js"></script>


		<script type="text/javascript" src="vue/vue_config.js"></script>
		<script type="text/javascript" src="vue/axios.min.js"></script>
		<script type="text/javascript" src="vue/vue_api.js"></script>
		<script type="text/javascript" src="vue/commons.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#vue',
				data: {
					//共用
					cartColor: ['bg-primary', 'bg-success', 'bg-info', 'bg-warning',
						'bg-danger', 'bg-purple', 'bg-cyan', 'bg-brown'
					],
					type:[
						{"label":"新增其他","value":"新增其他"},
						{"label":"网址管理","value":"网址管理"},
					],
					source:"新增其他",
					operateType: "",
					query: {},

					//第一页面使用
					list: [],

					//第二页面使用
					logintokenSource:{},
					logintokenContent:{},
					showModal: {},
					hiddenModal: {},

					//第三页面使用
					listWebsite:[],
					showModalWebsite: {},
					hiddenModalWebsite: {},

					//第四个页面
					showModalLook: {},
					hiddenModalLook: {},

				},
				created() {
					this.listLogintokenSource();
				},
				mounted() {
					this.showModal = document.getElementById("showModal")
					this.hiddenModal = document.getElementById("hiddenModal")
					
					this.showModalWebsite = document.getElementById("showModalWebsite")
					this.hiddenModalWebsite = document.getElementById("hiddenModalWebsite")

					this.showModalLook = document.getElementById("showModalLook")
					this.hiddenModalLook = document.getElementById("hiddenModalLook")


					const exampleModal = document.getElementById("exampleModal");
					$(exampleModal).on('hide.bs.modal', this.onModalHide);

					const exampleModalWebsite = document.getElementById("exampleModalWebsite");
					$(exampleModalWebsite).on('hide.bs.modal', this.onModalHide);

					const exampleModalLook = document.getElementById("exampleModalLook");
					$(exampleModalLook).on('hide.bs.modal', this.onModalHide);

				},

				methods: {
					//共用
					onModalHide(){
						if(this.operateType == '请选择'){
							this.query = {};
							this.showModal.click();
						}

						if(this.operateType == '新增凭证'){
							this.logintokenSource={};
							this.logintokenContent={};
							this.source="新增其他";
						}
						if(this.operateType == "查看"||this.operateType == '修改'){
							this.logintokenSource={};
							this.logintokenContent={};
						}
					},
					clickQuery(){
						if(this.operateType == '请选择'){
							this.listWebsiteContent();
						}
						if(this.operateType == ''){
							this.listLogintokenSource();
						}
					},
					clickClean() {
						if(this.operateType == '请选择'){
							this.query = {};
							this.listWebsiteContent();
						}
						if(this.operateType == ''){
							this.query = {};
							this.listLogintokenSource();
						}
					},

					clickEnter(){
						if(this.operateType =='新增凭证'){
							this.addLogintoken();
						}
						if(this.operateType =='修改'){
							this.updateLogintoken();
						}

					},

					clickClose(){
						if(this.operateType =='新增凭证'){
							this.hideModal().click();
						}
						if(this.operateType =='查看'||this.operateType=='修改'){
							this.hiddenModalLook.click();
						}
					},

					//第一页面使用
					toAddLoginToken() {
						this.operateType="新增凭证"
						this.showModal.click();//显示新增页面
					},
					check(item){
						this.logintokenSource = item;
						this.getLogintoken();
						this.showModalLook.click();
						this.operateType='查看';
					},
					delLogintoken(item){
						delLogintoken(item);
					},


					//第二页面使用

					sourceChange(){
						this.logintokenSource={};
						if(this.source == '网址管理'){
							this.showModalWebsite.click();
							this.listWebsiteContent();
							this.operateType = "请选择";
							this.hiddenModal.click();//点击隐藏新增
						}
					},

					//第三页面使用

					clickCheck(item){
						this.logintokenSource = item;
						this.hiddenModalWebsite.click();
						this.operateType = '新增凭证'
						this.query={};
					},

					//第四页面使用
					toEdit(){
						if(this.operateType=='修改'){
							this.operateType = '查看';
						}else{
							this.operateType = '修改';
						}

					},



					listLogintokenSource() {
						var url = rootUrl + "logintoken/list";
						fetchDataPost(url, this.query).then(res => {
							if (res.code === 200) {
								this.list = res.list;
								success(res.message);
							} else {
								danger(res.message);
							}
						})
					},

					//选择的时候调用的方法
					listWebsiteContent(){
						var url = rootUrl+"front/listWebsite";
						fetchDataPost(url,this.query).then(res =>{
							if(res.code === 200){
								this.listWebsite = res.list;
								success(res.message);
							}else{
								danger(res.message);
							}
						})
					},

					addLogintoken() {
						var url = rootUrl + "logintoken/add";
						this.logintokenSource.logintokenContent = this.logintokenContent;
						fetchDataPost(url, this.logintokenSource).then(res => {
							if (res.code === 200) {
								this.listLogintokenSource();

								this.hiddenModal.click();

							} else {
								danger(res.message);
							}
						})
					},

					updateLogintoken() {
						var url = rootUrl + "logintoken/update";
						this.logintokenSource.logintokenContent = this.logintokenContent;
						fetchDataPost(url, this.logintokenSource).then(res => {
							if (res.code === 200) {
								this.listLogintokenSource();

								this.hiddenModalLook.click();

							} else {
								danger(res.message);
							}
						})
					},

					delLogintoken(item) {
						var url = rootUrl + "logintoken/del";
						fetchDataPost(url, item).then(res => {
							if (res.code === 200) {
								this.listLogintokenSource();
							} else {
								danger(res.message);
							}
						})
					},

					getLogintoken() {
						var url = rootUrl + "logintoken/get";
						this.logintokenSource.logintokenContent = this.logintokenContent;
						fetchDataPost(url, this.logintokenSource).then(res => {
							if (res.code === 200) {
								this.logintokenSource = res.data;
								this.logintokenContent = res.data.logintokenContent;
								console.log(this.logintokenContent)
								console.log(this.logintokenSource)
							} else {
								danger(res.message);
							}
						})
					},



				}

			})
		</script>

	</body>
</html>